<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"/>
    <title>乐淘登录</title>
    <link type="image/x-icon" rel="shortcut icon" href="../images/favicon.ico">
    <link rel="stylesheet" href="../assets/mui/css/mui.css"/>
    <link rel="stylesheet" href="../assets/fa/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/user.css"/>
</head>
<body>
<div class="lt_container">
    <header class="lt_topBar">
        <a class="btn_left" href="javascript:history.back();"><span class="mui-icon mui-icon-arrowleft"></span></a>
        <h3>登录</h3>
    </header>
    <div class="lt_content">
        <div class="lt_wrapper">
            <div class="mui-scroll-wrapper">
                <div class="mui-scroll">
                    <form class="mui-input-group">
                        <div class="mui-input-row">
                            <label>用户名</label>
                            <input name="username" type="text" placeholder="请输入用户名">
                        </div>
                        <div class="mui-input-row">
                            <label>密码</label>
                            <input name="password" type="password" class="mui-input-password"  placeholder="请输入密码" >
                        </div>
                        <div class="mui-input-row mui-plus-visible">
                            <label>Input</label>
                            <input type="text" class="mui-input-speech mui-input-clear" placeholder="语音输入" data-input-clear="6" data-input-speech="6"><span class="mui-icon mui-icon-clear mui-hidden"></span><span class="mui-icon mui-icon-speech"></span>
                        </div>
                        <div class="mui-button-row">
                            <button type="button" class="mui-btn mui-btn-primary" id="login_btn">登录</button>&nbsp;&nbsp;
                            <button type="reset" class="mui-btn mui-btn-danger">重置</button>
                        </div>
                    </form>
                    <div class="mui-text-right">
                        <a class="mui-btn mui-btn-link" href="user/register.html">免费注册</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer class="lt_tabBar">
        <ul>
            <li><a href="../index.html"><span class="fa fa-home"></span><p>首页</p></a></li>
            <li><a href="../category.html"><span class="fa fa-bars"></span><p>分类</p></a></li>
            <li><a href="cart.html"><span class="fa fa-shopping-cart"></span><p>购物车</p></a></li>
            <li class="now"><a href="index.html"><span class="fa fa-user"></span><p>会员中心</p></a></li>
        </ul>
    </footer>
</div>
<script src="../assets/mui/js/mui.js"></script>
<script src="../assets/zepto/zepto.min.js"></script>
<script>
     /*封装工具函数*/
        window.lt = {};
        /*获取地址栏参数*/
        lt.getUrlParams = function () {
            /*拿到以get形式传递的地址栏的数据 ?key=1&name=10*/
            var search = location.search;
            /*需要把字符串转换成对象  便于开发使用*/
            var params = {};
            /*如果有？代表有参数*/
            /*没有问号就没有参数*/
            if (search.indexOf('?') == 0) {
                search = search.substr(1);
                var arr = search.split('&');
                for (var i = 0; i < arr.length; i++) {
                    /*itemArr name=10  ----> [name,10]*/
                    var itemArr = arr[i].split('=');
                    params[itemArr[0]] = itemArr[1];
                }
            }
            return params;
        }
    //当我们点击登录按钮的时候，我们登录(收集用户名、密码)，发送ajax
    $(function(){
        $('#login_btn').on('tap',function(){
            // console.log(123)
            var username = $('input[name="username"]').val();
            var password = $('input[name="password"]').val();
            // console.log(username,password);
            $.ajax({
                    type: 'post',
                    url: '/user/login',
                    data: { username: username,password:password},//{key1:value1}
                    dataType: 'json',
                    success: function (data){
                        // console.log(data);
                        if(data.error == 403){
                            mui.toast(data.message);
                        }
                        if(data.success === true){
                            //成功之后的逻辑
                            //成功之后做什么事情?
                                // 如果是从详情页、购物车访问，然后跳转到登录的话，那登录成功，就会跳回去
                                //如果是直接访问登录页面，成功之后，去用户中心
                                    //思考：我们登录成功之后，我们怎么知道要回到之前哪个页面
                            //   console.log(lt.getUrlParams()); 
                            var returnUrl = lt.getUrlParams().returnUrl;
                            if(returnUrl){
                                location.href = returnUrl;
                            }else{
                                location.href = '/mobile/user/index.html';
                            }  
                        }
                }
            })
        })
    })
</script>
</body>
</html>